<template>
   <div>
        <theader title="用户登录" style="border-bottom: 1px solid #999;"></theader>
        <div class="login">
        <img src="../assets/images/bb.png">
        <el-input v-model="username" placeholder="请输入用户账号"></el-input>
         <el-input v-model="password" placeholder="请输入用户密码"></el-input>
        <div v-if="isError">
        <p style="color:red">用户名错误或者密码错误，请重新输入!</p>
        </div>
        <el-button native-type="button" type="warning" style="width:430px" v-on:click="dologin">登录</el-button>
        </div>
   </div>
</template>

<script>
    import theader from '@/components/Theader.vue'

    export default{
        name:'userlogin',
        components:{theader},
        data(){
            return{
                username:'',
                password:'',
                isError:false
            }
        },
    methods:{
        dologin(){
            this.http.get("../../static/json/users.json").then( res =>{
                for (var i = 0; i < res.data.length; i++) {
                    if(this.username == res.data[i].username && this.password == res.data[i].password){

                        this.$store.commit('dologin',this.username);
                        this.$router.push({path:'/user/center'});
                        console.log(this.$store.state.username);
                        // this.$router.push({path:"/user/center"});
                    }else{
                        this.isError = true;
                    }
                }
            })
        }
    }
    }

</script>

<style scoped>
    .login{
    	margin-top:50px; 

    }
    .el-input{
    	margin-bottom: 10px;
        width: 100%;
    }

</style>